<template>
    <div class="kanban-wrapper">
        <div class="kanban-main">
            <div class="folder-manage">
                <div class="folder-manage-group">
                    <span>大屏分组</span>
                    <i class="b-iconfont b-icon-plus btn-add-icon" title="新增分类" @click="visible = true"></i>
                </div>
                <div class="folder-manage-main">
                    <div
                            class="folder-item"
                            :class="{ 'folder-item-checked-color': id === 0 }"
                            @click="toggleProject({id:0,name:'全部'})"
                    >
                        <span>全部</span>
                    </div>
                    <div
                            v-for="item in folderList"
                            :key="item.id"
                            class="folder-item"
                            :class="{ 'folder-item-checked-color': id === item.id }"
                            @click="toggleProject(item)"
                    >
                        <span class="folder-name">{{ item.name }}</span>
                        <span class="group-btns" @click.stop>
                            <i class="b-iconfont b-icon-edit" title="编辑" @click="toggleProject(item),visible = true"></i>
                            <i class="b-iconfont b-icon-delete" title="删除" @click="confirmDeleteGroup(item)"></i>
                        </span>
                    </div>
                </div>
            </div>
            <div class="right-list">
                <kanban-list :group="{pid:id,name:name}"></kanban-list>
            </div>

            <b-modal
                    v-model="visible"
                    append-to-body
                    title="分类编辑"
                    top="200px"
                    custom-class="schema-modal"
            >
                <b-form label-width="80px" :model="categoryForm" label-suffix=":">
                    <b-form-item label="排序" prop="sort">
                        <b-input v-model="categoryForm.sort"></b-input>
                    </b-form-item>
                    <b-form-item label="分类名称" prop="name"
                                 :rules="{ required: true, message: '分类名称不能为空', trigger: 'blur' }">
                        <b-input v-model="categoryForm.name"></b-input>
                    </b-form-item>
                </b-form>
                <div class="t-center">
                    <b-button type="primary" @click="saveCategory" :loading="loading" style="width: 200px;">
                        保存
                    </b-button>
                </div>
            </b-modal>

        </div>
    </div>
</template>

<script>
    import useFolder from './useFolder'
    import KanbanList from './list.vue'
    export default {
        name: 'ScreenList',
        components: {KanbanList},
        setup() {
            return {
                ...useFolder()
            }
        },
    }
</script>

<style scoped lang="scss">
  .kanban-wrapper {
    position: relative;
    user-select: none;

    .kanban-main {
      display: flex;
      flex: 1;

      .right-list {
        padding-left: 20px;
        padding-right: 50px;
        width: 100%;
        color: #fff;
      }
    }
  }

  .folder-manage {
    min-width: 240px;
    max-width: 240px;
    font-size: 14px;
    overflow-y: auto;
    height: calc(100vh - 150px);

    &-group {
      display: flex;
      align-items: center;
      justify-content: space-between;
      line-height: 36px;
      padding-right: 8px;
      padding-left: 24px;
      height: 56px;

      .btn-add-icon {
        font-size: 16px;
        cursor: pointer;

        &:hover {
          color: var(--bin-color-primary);
        }
      }
    }

    .folder-item {
      position: relative;
      height: 36px;
      padding: 0 16px 0 16px;
      display: flex;
      font-size: 14px;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      transition: color 0.2s;

      &:hover {
        color: var(--bin-color-primary);

        .group-btns {
          display: inline-block;
        }
      }

      &.folder-item-checked-color {
        background: var(--color-primary);
        color: #fff0f6;

        &:hover {
          color: #fff !important;
        }
      }

      &.folder-all {
        padding-left: 50px;
        transition: color 0.2s;
        cursor: pointer;
      }

      .folder-name {
        width: 100px;
        font-size: 14px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        pointer-events: none;
      }

      .group-btns {
        display: none;

        > i {
          font-size: 16px;
        }

        i + i {
          margin-left: 6px;
        }
      }
    }

    .edit-input {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      background: #1d262e;
      color: #fff;
      padding: 0 10px;
      line-height: 30px;
      width: 80%;
      height: 30px;
      border: 1px solid var(--bin-color-primary);
      transition: 0.2s;
      box-shadow: 0 0 10px -6px #000;
    }
  }
</style>
